<template>
    <!-- 精选列表 -->
    <div class="carefullyChosen_list" v-for="(item, index) in RecommendCourseList" :key="index"
        @click="toDatelis(item.order_id)">
        <div class="title">{{ item.course_classify_title }}</div>
        <div class="carefullyChosen-box">
            <div class="carefullyChosen_name">
                <span class="span1">{{ item.shop_name }}</span>
                <span class="span2" style="color:red">已完成</span>
                <p class="p1">{{ item.created_at }}~{{ item.end_time }}</p>
            </div>
            <div class="carefullyChosen_btn">
                <span>实付款：￥{{ item.order_price }}.00</span>
                <div class="btnn">
                    <button>马上学习</button>
                    <button>去评价</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router";
defineProps({
    RecommendCourseList: Array,
});
const { push } = useRouter();
const toDatelis = (id) => {
    push({
        path: "/orderdetails",
        query: { id },
    });
};
</script>

<style lang="scss" scoped>
.carefullyChosen_list {
    width: 700px;
    position: relative;
    height: 300px;
    margin: auto;
    box-shadow: 0 0.04rem 0.09333rem 0 hsl(0deg 0% 81%);
    margin-top: 30px;
    border-radius: 20px;

    .title {
        width: 116px;
        height: 50px;
        color: white;
        text-align: center;
        background: url() no-repeat;
        background-size: 100% 100%;
        font-size: 20px;
        line-height: 50px;
        left: 0;
        top: 0;
    }

    .carefullyChosen-box {
        padding: 20px;
        height: 100%;

        .carefullyChosen_name {
            font-size: 30px;
            border-bottom: 1px solid gray;

            .span1 {
                width: 80%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .p1 {
                color: gray;
                font-size: 25px;
            }
        }

        .carefullyChosen_btn {
            width: 100%;
            height: 100px;
            line-height: 100px;
            font-size: 30px;
            display: flex;

            .btnn {
                padding-top: 25px;
                padding-left: 100px;
                display: flex;

                button {
                    width: 136px;
                    height: 50px;
                    border: none;
                    border-radius: 25px;
                    background: #ef5a2a;
                    color: #fff;
                    text-align: center;
                    font-size: 14px;
                    line-height: 50px;
                    margin: 0 15px;
                }
            }
        }

    }
}

.active_a {
    color: green;
    font-size: 30px;
}

.active_b {
    color: red;
    font-size: 30px;
}
</style>
